<template>
  <div style="padding: 20px">
    <Alert message="标签示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件属性：</div>
        <div>message: 内容</div>
        <div>type: success，warning，info，error</div>
        <div>closable: 是否可关闭</div>
        <div>#closeIcon: 插槽自定义关闭按钮</div>
      </template>
    </Alert>
    <div class="demoTittle">基础用法(Alert)</div>
    <div class="demoTittle2">- 用于页面中展示重要的提示信息。</div>
    <div class="demoTittle2"
      >-交互说明：支持定义宽度，距离上下部16px，整体高度40px,左右内边距16px。</div
    >
    <a-space direction="vertical" :size="20">
      <a-alert message="用于页面中展示重要的提示信息，用于页面中展示重要的提示信息" type="info" />

      <a-alert
        message="用于页面中展示重要的提示信息，用于页面中展示重要的提示信息"
        type="success"
      />
      <a-alert
        message="用于页面中展示重要的提示信息，用于页面中展示重要的提示信息"
        type="warning"
      />
      <a-alert message="用于页面中展示重要的提示信息，用于页面中展示重要的提示信息" type="error" />
    </a-space>
    <div style="height: 20px"></div>
    <div class="demoTittle">带关闭</div>
    <div class="demoTittle2">- UI说明：支持定义宽度，距离上下部16px，整体高度40px,内边距16px。</div>
    <a-space direction="vertical" :size="20">
      <a-alert
        message="用于页面中展示重要的提示信息，用于页面中展示重要的提示信息"
        type="info"
        closable
      >
        <template #closeIcon>
          <img src="@/assets/image/close.png" />
        </template>
      </a-alert>

      <a-alert
        message="用于页面中展示重要的提示信息，用于页面中展示重要的提示信息"
        type="success"
        closable
      >
        <template #closeIcon>
          <img src="@/assets/image/close.png" />
        </template>
      </a-alert>
      <a-alert
        message="用于页面中展示重要的提示信息，用于页面中展示重要的提示信息"
        type="warning"
        closable
      >
        <template #closeIcon>
          <img src="@/assets/image/close.png" />
        </template>
      </a-alert>
      <a-alert
        message="用于页面中展示重要的提示信息，用于页面中展示重要的提示信息"
        type="error"
        closable
      >
        <template #closeIcon>
          <img src="@/assets/image/close.png" />
        </template>
      </a-alert>
    </a-space>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined, CloseCircleOutlined, UserOutlined } from '@ant-design/icons-vue';

  const description = 'This is a description.';
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    color: #494a4a;
    font-size: 14px;
    margin-bottom: 18px;
  }
</style>
